<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer
      :title="addproductTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="70%"
      :wrapperClosable="false"
    >
      <div class="layout">
        <el-form
          label-position="left"
          :inline="true"
          size="small"
          ref="eventsForm"
          :model="eventsForm"
        >
          <div class="configform-box">
            <el-form-item
              label="关键字"
              class="form-box-item"
              label-width="50px"
              prop="activity_name"
            >
              <el-input
                placeholder="请输入关键字"
                v-model="eventsForm.activity_name"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="分类"
              class="form-box-item"
              label-width="50px"
              prop="cate_id"
            >
              <el-cascader
                v-model="eventsForm.cate_id"
                :options="categoryList"
                :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  children: 'children',
                }"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="height: 30px" @click="getListWay"
                >查询</el-button
              >
              <el-button style="height: 30px" @click="resetForm('eventsForm')"
                >重置</el-button
              >
              <el-button
                type="primary"
                style="height: 30px"
                @click="Batchdeletion"
                >批量添加</el-button
              >
            </el-form-item>
          </div>
          <div class="configform-box">
            <div>
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="productlist"
                :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column
                  align="center"
                  prop="main_image"
                  label="商品图片"
                >
                  <template slot-scope="{ row }">
                    <el-image
                      :src="row.main_image"
                      style="width: 50px; height: 50px"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="name"
                  label="商品名称"
                ></el-table-column>
                <el-table-column align="center" prop="sort" label="商品分类">
                  <template slot-scope="{ row }">
                    <el-tag size="mini" v-if="row.category1">{{
                      row.category1.name
                    }}</el-tag>
                    <el-tag size="mini" v-if="row.category2">{{
                      row.category2.name
                    }}</el-tag>
                    <el-tag size="mini" v-if="row.category3">{{
                      row.category3.name
                    }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="mer_name"
                  label="所属店铺"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="product_sum_initial_sales"
                  label="库存"
                ></el-table-column>
                <el-table-column
                  fixed="right"
                  width="100"
                  prop="address"
                  label="操作"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleadd(scope.row)">
                      添加
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="eventsForm.page"
                :limit.sync="eventsForm.count"
                @pagination="getListWay"
              />
            </div>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getCategoryList } from "@/api/commodity/index";
import { listGoodsIds } from "@/api/index";
export default {
  name: "detail",
  props: [
    "addproductTitle",
    "goodsIds",
    "goodsType",
    "configuration",
    "productConfigTitle",
  ],
  components: {},

  data() {
    return {
      goodsids: [],
      goodsIdsRow: [],
      drawer: true,
      activeName: "first",
      // 商品类目列表
      categoryList: [],
      eventsForm: {
        state: "all",
        keywords: "",
        cate_id: [],
        goods_ids: "",
        goods_pay_type: "",
        page: 1,
        count: 10,
        type: 2,
        is_merchant: 2,
        status: 1,
      },
      total: 0,
      loading: false,
      productlist: [],
      multipleSelection: [],
    };
  },
  created() {
    this.getConfigurationWay();
  },
  methods: {
    getConfigurationWay() {
      getCategoryList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.categoryList = res.data;
        this.getListWay();
      });
    },
    getListWay(goodsids) {
      if (Array.isArray(goodsids)) {
        this.goodsids = goodsids;
      }
      this.loading = true;
      if (this.productConfigTitle == "配置奖池商品") {
        this.getAwardList();
      } else {
        this.getGoodsList();
      }
    },
    getAwardList() {
      this.eventsForm.goods_pay_type = "";
      this.eventsForm.goods_ids = this.goodsIds.toString();
      listGoodsIds(this.eventsForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.productlist = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    getGoodsList() {
      if (this.goodsType == "购买商品") {
        this.eventsForm.goods_pay_type = 1;
      } else {
        this.eventsForm.goods_pay_type = 2;
      }
      this.eventsForm.goods_ids = this.goodsids.toString();
      listGoodsIds(this.eventsForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.productlist = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },

    // 关闭抽屉
    closedinvitation() {
      this.$parent.closeaddproduct();
    },
    handleSelectionChange() {},
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getListWay();
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量删除
    Batchdeletion() {
      if (this.multipleSelection.length == 0) {
        this.$alert("请选择商品", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      } else {
        let arr = [];
        this.multipleSelection.forEach((item) => {
          if (item.product_sum_initial_sales != 0) {
            arr.push({
              id: item.id,
              total_num: this.configuration.total_num,
              gif_num: this.configuration.gif_num,
            });
          }
        });
        this.$nextTick(() => {
          this.$parent.addproductWay(this.multipleSelection);
          this.$parent.addproductRowWay(arr);
        });
      }
    },
    handleadd(row) {
      if (row.product_sum_initial_sales == 0) {
        this.$messages.error("当前商品没有库存");
        return;
      }
      this.$parent.addproductWay([row]);
      this.$parent.addproductRowWay([
        {
          id: row.id,
          total_num: this.configuration.total_num,
          gif_num: this.configuration.gif_num,
        },
      ]);
    },
  },
};
</script>
<style lang="scss">
.drawer-layout {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .configform-box {
    .form-box-item {
      .el-form-item__label {
        font-size: 12px;
        font-weight: 500;
        width: 80px;
      }

      .el-input {
        width: 200px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.configform-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }
}

.button-box {
  margin-left: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }
}
</style>